<template>
  <div class="create-box">
    <div class="title">实时优选链路拓扑图</div>
    <div class="create-success">
      <div class="map-box">
        <Map></Map>
      </div>
      <div class="right-box">
        <div class="tabs">
          <div class="tab is-active">综合最优</div>
          <div class="tab">成本优先</div>
          <div class="tab">距离优先</div>
        </div>
        <div class="solutions-list">
          <div v-for="(item,index) in solutionList" :key="index" class="solutions-box"
               :class="{'is-checked':get(selectId,'name')===item.name}" @click="onSelect(item)">
            <div class="name"><strong>方案{{index+1}}：</strong>{{item.name}}</div>
            <div>
              <p>空闲算力：{{item.power}}</p>
              <p>需要算力：{{item.power}}</p>
              <p>网络带宽：{{item.bandwidth}}</p>
              <p>预估时长：{{item.time}}</p>
              <p>预计费用：{{item.price}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="运行任务" width="420px" :visible.sync="dialogVisible" append-to-body @close="onClose">
      <div class="result">
        <div>
          <i class="el-icon-success"></i>
          <div class="result-title">运行成功</div>
        </div>

        <div class="info">
          <p>数据中心：{{get(selectId,'name')}}</p>
          <p>资源位置：{{get(nodeInfo,'city')}}</p>
          <p>区 域：{{get(nodeInfo,'province')}}</p>
        </div>
      </div>
      <span slot="footer">
        <el-button type="primary" size="small" plain @click="$router.push({name:'scheduler-overview'})">返回调度中心</el-button>
        <el-button type="primary" size="small" @click="viewInstance">查看任务状态</el-button>
      </span>
    </el-dialog>
    <div class="footer">
      <el-button type="primary" class="mybtn" size="small" plain @click="$router.push({name:'scheduler-overview'})"
                 :disabled="loading">取消</el-button>
      <el-button type="primary" class="mybtn" size="small" plain @click="up" :disabled="loading">上一步</el-button>
      <el-button type="primary" class="mybtn" size="small" @click="onDistribution" :loading="loading">算力分配</el-button>
    </div>
  </div>
</template>

<script>
  import Map from './Map'
  import store from '@/conf/home/store'
  import _ from 'lodash'
  import { provideList } from './config'
  // import { random } from '@/module/util/util'
  export default {
    props: {
      taskInfo: Object
    },
    components: {
      Map
    },
    data () {
      return {
        provideList,
        store,
        dialogVisible: false,
        loading: false,
        selectId: null,
        form: {
          processInstancePriority: 'MEDIUM',
          failureStrategy: 'CONTINUE',
          warningGroupId: 0,
          taskDependType: 'TASK_POST',
          runMode: 'RUN_MODE_SERIAL',
          dryRun: 0,
          warningType: 'NONE'
        }
      }
    },
    computed: {
      solutionList () {
        let centerNode = _.get(this.taskInfo, 'centerNode', 'cs')
        let node = this.provideList.find(e => e.value === centerNode)
        return _.get(node, 'solutionList', [])
      },
      nodeInfo () {
        let centerNode = _.get(this.taskInfo, 'centerNode', 'cs')
        let node = this.provideList.find(e => e.value === centerNode)
        return node
      }
    },
    created () {
      if (this.solutionList.length === 1) {
        this.selectId = this.solutionList[0]
      }
    },
    methods: {
      onSelect (item) {
        this.selectId = item
      },
      viewInstance () {
        // task-instance
        let projectCode = _.get(this.taskInfo, 'projectCode', '')
        if (!projectCode) return
        this.$router.push({ name: 'projects-instance-list', params: { projectCode } })
      },
      up () {
        this.$emit('cancel')
      },
      onClose () {
        this.viewStatus()
      },
      async onDistribution () {
        if (!this.selectId) {
          this.$message.warning('请选择一个方案')
          return
        }
        this.loading = true
        let { projectCode, processDefinitionCode } = this.taskInfo
        let param = {
          ...this.form,
          projectCode,
          processDefinitionCode
        }
        this.store.dispatch('dag/processStart', param).then(res => {
          this.dialogVisible = true
          this.loading = false
        }).catch(e => {
          this.loading = false
          this.$message.error(e.msg || '')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep.mybtn {
    min-width: 80px;
}
.title {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 600;
}
.create-success {
    margin: 0px auto;
    width: 100%;
    height: 770px;
    padding: 0 100px;
    background: url(./images/create-success.png) no-repeat left top;
    background-size: contain;
    display: flex;
    overflow: hidden;
    .map-box {
        width: 670px;
        background: url('./images/img_map.png') no-repeat;
        height: 800px;
        background-size: contain;
        // position: fixed;
    }
    .right-box {
        position: relative;
        flex: 1;
        margin-left: 50px;
        // margin-left: 670px;
        padding-top: 160px;
    }
}

.tabs {
    display: flex;
    .tab {
        width: 140px;
        height: 30px;
        line-height: 28px;
        background: #ffffff;
        border: 1px solid rgba(51, 49, 126, 0.5);
        border-radius: 4px;
        color: #33317e;
        text-align: center;
        margin-right: 10px;
        cursor: pointer;
        &.is-active {
            background: #33317e;
            color: #ffffff;
        }
    }
}

.solutions-box {
    width: 440px;
    height: 150px;
    padding: 10px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    margin-top: 20px;
    font-size: 12px;
    color: #333333;
    transition: background 0.3s ease;
    cursor: pointer;
    .name {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: normal;
    }
    p {
        margin: 0;
        line-height: 20px;
    }
    &.is-checked {
        background: linear-gradient(180deg, rgba(51, 49, 126, 0.8), rgba(69, 17, 109, 0.8) 100%);
        border: 1.5px solid #33317e;
        border-radius: 4px;
        box-shadow: 2px 2px 10px 3px rgba(51, 49, 126, 0.6);
        backdrop-filter: blur(2px);
        color: #ffffff;
        position: relative;
        &::after {
            position: absolute;
            content: ' ';
            right: 0;
            bottom: 0;
            width: 30px;
            height: 34px;
            background: url(./images/checked.png) no-repeat;
        }
    }
}

.result {
    text-align: center;
    i {
        font-size: 50px;
        color: #34a900;
    }
    margin-bottom: 30px;
    &-title {
        font-size: 20px;
        font-weight: 600;
        margin-top: 10px;
    }

    .info {
        margin: 20px 100px;
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        p {
            white-space: nowrap;
        }
    }
}

.footer {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 10px 40px;
    background: #ffffff;
    box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.1);
    text-align: right;
}
</style>
